import React, {Component} from 'react';
import Axios from "axios";
import './css/info.css'

class Info extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: "",
            info: []

        }
    }

    componentWillMount() {
        const {id} = this.state
        this.setState({
            id: this.props.match.params.id
        })
    }

    componentDidMount() {
        const {id} = this.state
        const {info} = this.state
        Axios.get('http://api.cat-shop.penkuoer.com/api/v1/products/' + id).then(result => {
            console.log(result)
            this.setState({
                info: result.data
            })
        })
    }

    render() {
        const {info}=this.state
        return (
            <div>
                <div className="infoView">
                    <img src={/http/.test(info.coverImg)?info.coverImg:"http://api.cat-shop.penkuoer.com"+info.coverImg} alt=""/>
                    <div className="infoRight">
                       <h3>{info.name}</h3>
                    </div>
                </div>
            </div>
        );
    }
}

export default Info;
